<template>
  <a-card :bordered="false">
<a-row v-if="!seatShow" :gutter="50">
  <a-col :span="4">
        <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange"/>
        <a-tree
          @expand="onExpand"
          @select="onSelect"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          :treeData="gData"
        >
          <template slot="title" slot-scope="{title}">
            <span v-if="title.indexOf(searchValue) > -1">
              {{title.substr(0, title.indexOf(searchValue))}}
              <span
                style="color: #f50"
              >{{searchValue}}</span>
              {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
            </span>
            <span v-else>{{title}}</span>
          </template>
        </a-tree>
      </a-col>

    <a-col :span="20">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8">
            <a-form-item label="图书名称">
              <a-input placeholder="请输入图书名称" v-model="queryParam.Bname" ref="Bname"></a-input>
            </a-form-item>
          </a-col>
         
          <a-col :md="6" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    </a-col>
    <!-- table区域-end -->
</a-row>
    <!-- 表单区域 -->
    <stock-modal ref="modalForm" @ok="modalFormOk"></stock-modal>
  </a-card>
</template>

<script>
  import { getAction } from '../../api/manage'
  import StockModal from './modules/StockModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

  export default {
    name: "StockList",
    mixins:[JeecgListMixin],
    components: {
      StockModal
    },
    data () {
      return {
         seatShow: false,
         dataSource: [],
         // 树相关
        expandedKeys: [],
        searchValue: '',
        autoExpandParent: true,
        gData: [],
         cId: '',
         Bname:'',
        description: '库存表管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
           },
		   {
            title: '图书名称',
            align:"center",
            dataIndex: 'bname'
           },
		   {
            title: '数量',
            align:"center",
            dataIndex: 'num'
           },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
		url: {
          list: "/book/stock/list",
          delete: "/book/stock/delete",
          deleteBatch: "/book/stock/deleteBatch",
          exportXlsUrl: "book/stock/exportXls",
          importExcelUrl: "book/stock/importExcel",
       },
    }
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
    methods: {
     loadCategoryList(cId){
       this.Bname = this.$refs.Bname.value;
        // 加载当前分类下的书籍数据
        getAction('book/stock/list/' + cId).then(res => {
          if (res.success) {
            this.dataSource = res.result.records;
          }
        })
      },
      onSelect(selectedKeys, e) {
        let record = e.node.dataRef;
        if(record.children.length === 0){
          console.log(record.key)
          // 设置cid
          this.cId = record.key;
          this.loadCategoryList(record.key)
          
        }
      },


       setChildren(url, no, parentId) {
        this.getTreeData(url, no, parentId)
      },
      getTreeData(url, no, parentId) {
        getAction(url, no, parentId).then(res => {
            if (res.success) {
              // 遍历返回结果
              for (let i = 0; i < res.result.length; i++) {
                const dataResult = {
                  key: '',
                  title: '',
                  scopedSlots: { title: 'title' },
                  children: []
                }
                if (no === 0) {
                  // 加载一级分类
                  dataResult.key = res.result[i].id
                  dataResult.title = res.result[i].categoryName
                  this.gData.push(dataResult)
                  // 二级分类列表
                  this.setChildren('book/category/childrenList/' + res.result[i].id, 1, res.result[i].id)
                }
                if (no === 1) {
                  // 遍历一级元素名称相同添加子元素
                  for (let j = 0; j < this.gData.length; j++) {
                    if (parentId === this.gData[j].key) {
                      // 加载二级分类
                      dataResult.key = res.result[i].id
                      dataResult.title = res.result[i].categoryName
                      this.gData[j].children.push(dataResult)
                      
                    }
                  }
                }
              }
            } else {
            }
          }
        )
      },
      //树展开
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      //树搜索
      onChange(e) {
        const value = e.target.value
        const expandedKeys = dataList
          .map(item => {
            if (item.title.indexOf(value) > -1) {
              return getParentKey(item.key, gData)
            }
            return null
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true
        })
      },
      //表格加载
      loadData() {
        this.dataSource = []
      },

      initDictConfig(){
        initDictOptions('bz').then((res)=>{
            if(res.success){
              this.bzOptions=res.result;
            }
        });
       initDictOptions('type').then((res)=>{
            if(res.success){
              this.typeOptions=res.result;
            }
        });
      },
     
    },
    created() {
      this.getTreeData('book/category/parentList', 0,'');
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>